<!DOCTYPE html>
<html class = html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?libraries=geometry&amp;sensor=false"" 
          type="text/javascript"></script>
          
    <style>
    
    .container
    {
    overflow: hidden;
    position: relative;
    width: 100%;
    height:100%
    }     
    .parent 
    {
    overflow: hidden;
    position: absolute;
    width: 80%;
    height: 73%;
    left:10%;
    top:13.7%;
    
    
    }
    
    .childMap
    {
    width: 100%;
    height: 100%;
    position: absolute;
   
    }
    
    html
    {
      height: 100%;
      background: url(static/bg.png) no-repeat center center fixed; 
	  -webkit-background-size: 100% 100%;
	 
    }
    
    </style>
    
     
</head>

<body style = "height:100%">
<div class = .container>
  <div class = "parent">
      <div id="map" class = "childMap"></div>
  </div>
</div>

</body>

<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: new google.maps.LatLng(52.9804709,-6.0427431),
    mapTypeId: google.maps.MapTypeId.SATELLITE});

  var marker;
  var lstMarkers = new Array();
  var numMarkers = 0;
  var infowindow = new google.maps.InfoWindow();
  var bounds;
  var maxZoomLevel = 12;
  var minZoomLevel = 7;
  var strictBounds = new google.maps.LatLngBounds(
		     new google.maps.LatLng(51.5592, -9.6111), 
		     new google.maps.LatLng(55.3833, -7.3667));
  var sentMaxZoomMessage = false;
  var sentMinZoomMessage = false;
  var name = null;
  var ptLocation = null;
  var weeklyGraph = null;
  var nowGraph = null;
  contentStringArray = new Array();
  contentIndex = 0
  
  var coNow = false;
  var coWeekly = false;
  
  var natNow = false;
  var natWeekly = false;
  
  

  contentStringArray[0] =  '<html>'+
  '<style>'+
  '.infoContainer'+
   '{'+       
    'width:100%;'+
    'height:100%;'+
   
   '}'+
   
   
   
   '.chartContainer'+
   '{'+
    'width:100%;'+
    'height:100%;'+
    'margin_bottom:20px;'+
 
   '}'+
   
   '.buttonContainer'+
   '{'+
   
    'width:100%;'+
    'position:relative;'+
    
   '}'+
   
   
   '.leftButtonStyle'+
   ' {          '+
     'bottom:0%;' +
     'left:5%;'+
   '  position:relative;'+
   ' }' + 
   
   '.rightButtonStyle'+
   ' {          '+
     'bottom:0%;' +
     'left:30%;'+
   '  position:relative;'+
   ' }' +   
   '</style>'+
   
   '<header><span id = name> </span> Twitter Swearing Stats'+
   '<p id = identifierString>  </p>' + 
   '</header>'+
   
   '<body>'+
  
   '<div class = "infoContainer" id = "xxxx">'+
    ' <div id = "chartContainer"> </div>'+
     '<div class = "buttonContainer">'+
     '<button type="button" id = "Button1" onclick = "Click()" class = "leftButtonStyle">Weekly Data!</button>'+
     '<button type="button" id = "Button2" onclick = "Click2()" class = "rightButtonStyle" >National Data!</button>'+
     '</div>'+
   
'</div>'+ 

  '</body>'+
  '</html>'; 
  
  
  

{%for location in placeMarkLocats %}  
var parsedJSON = eval({{location.dbPropEncBorder}});

var decodedLevels = decodeLevels(parsedJSON.levels)

  var setRegion = new google.maps.Polygon({
      path: google.maps.geometry.encoding.decodePath(parsedJSON.points),
      levels: decodedLevels,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2,
      
      title: "{{location.dbPropStrRegionName}}",
      map: map
  });

  

google.maps.event.addListener(setRegion,'click',function()
        {
	
		infowindow.close();
		
	            name = "{{location.dbPropStrRegionName}}";
                ptLocation = new google.maps.LatLng({{location.dbPropGPLocation.lat}}, {{location.dbPropGPLocation.lon}}); 
                nowGraph = '{{location.dbPropStrNowChartImg}}';
                weeklyGraph = '{{location.dbPropStrWeeklyChartImg}}'; 
                
                
               
               
       
         infowindow.setContent(contentStringArray[0]);
       
        infowindow.setPosition( ptLocation);
     
        infowindow.open(map);
        var nameBox = document.getElementById("name");
        nameBox.innerHTML = name;
        
        var chartBox = document.getElementById("chartContainer");
        chartBox.innerHTML = nowGraph;
        
       
        coNow = true;
        
    
        
      
        
        
        });
      
  
  




 
{% endfor %} 
  

function Click2()
{
	
	if(natWeekly == false)
		{
		
		
		{% for item in  nationalResults %}
		nowGraph = '{{item.dbPropStrNowChartImg}}'
		
	    {% endfor %}
		infowindow.open(map);
		var identBox =  document.getElementById("identifierString");
		identBox.innerHTML = 'National Now Stats'
		var chartBox = document.getElementById("chartContainer");
	    chartBox.innerHTML = nowGraph;
	    var btn = document.getElementById("Button2");
	    btn.innerHTML = "Nt. Weekly Data!";
		natNow = false;
		natWeekly = true;
		
		
			
		}
	
	if (natWeekly == true)
		{
		
		if (coNow == true)
		{
		coNow = false;
		}
	
		else (coWeekly == true)
		{
			coWeekly = false;
		}
		
		{% for item in  nationalResults %}
		weeklyGraph = '{{item.dbPropStrWeeklyChartImg}}'
	    {% endfor %}
		infowindow.open(map);
		var chartBox = document.getElementById("chartContainer");
	    chartBox.innerHTML = weeklyGraph;
	    var btn = document.getElementById("Button2");
	    var identBox =  document.getElementById("identifierString");
		identBox.innerHTML = 'National Weekly Stats'
	    btn.innerHTML = "Nt.Now Data!";
		natNow = false;
		natWeekly = true;
		
		}
}
function Click()
{
 
	
	//* /infowindow.setPosition(new google.maps.LatLng({{location.dbPropGPLocation.lat}}, {{location.dbPropGPLocation.lon}}));
	
 	if(coNow == true)
	{
	//infowindow.setContent(contentStringArray[1]);
	infowindow.open(map);
	var chartBox = document.getElementById("chartContainer");
    chartBox.innerHTML = weeklyGraph;
    var btn = document.getElementById("Button1");
    btn.innerHTML = "Today's Data!";
    coNow = false;
    coWeekly = true;
	}
	
	else if(coWeekly == true)
	{
		infowindow.open(map);
		var chartBox = document.getElementById("chartContainer");
	    chartBox.innerHTML = nowGraph;
	    var btn = document.getElementById("Buffon");
	    btn.innerHTML = "Weekly Data!";
	    coNow = true;
	    coWeekly = false;
	} 
	
	
}
 


  
  //var polyLine = new google.maps.Polyline(polyLineOptions);
  
  function decodeLevels(encodedLevelsString) {
     var decodedLevels = [];

    for (var i = 0; i < encodedLevelsString.length; ++i) {
        var level = encodedLevelsString.charCodeAt(i) - 63;
        decodedLevels.push(level);
    }
    return decodedLevels; 
}
  
 
  //
     
   
    
    //lstMarkers[numMarkers] = marker;
    //numMarkers++;
    
    
    
      
    //
    //RebindMap(map);
    
    function RebindMap()
    {
       bounds = new google.maps.LatLngBounds();
       for (var i = 0; i < lstMarkers.length; i++) 
       {
       bounds.extend(new google.maps.LatLng(parseFloat(lstMarkers[i].getPosition().lat()),parseFloat(lstMarkers[i].getPosition().lng())));
    }
    map.fitBounds(bounds);
    }
  
    google.maps.event.addListener(map,'dragend',function()
    		{
    	     /*  if (strictBounds.contains(map.getCenter())) return;
    	     RebindMap() */
		    });
    /* 	

        // We're out of bounds - Move the map back within the bounds

        var c = map.getCenter(),
            x = c.lng(),
            y = c.lat(),
            maxX = strictBounds.getNorthEast().lng(),
            maxY = strictBounds.getNorthEast().lat(),
            minX = strictBounds.getSouthWest().lng(),
            minY = strictBounds.getSouthWest().lat();

        if (x < minX) x = minX;
        if (x > maxX) x = maxX;
        if (y < minY) y = minY;
        if (y > maxY) y = maxY;

        map.setCenter(new google.maps.LatLng(y, x));
      }); */
    	    

      // Limit the zoom level
      google.maps.event.addListener(map, 'zoom_changed', function() {
    	  
        if (map.getZoom() < minZoomLevel) 
        	{
        	  map.setZoom(minZoomLevel);
        	
        	  if(sentMinZoomMessage == false)
        	  {
        	    alert("Min Zoom Reached!")
        	    sentMinZoomMessage = true;
        	  }
        	
        	}
        if (map.getZoom() > maxZoomLevel) 
        {
        	map.setZoom(maxZoomLevel);
        	
      	    if(sentMaxZoomMessage == false)
      	    {
      	      alert("Max Zoom Reached!")
      	      sentMaxZoomMessage = true;
      	    }
        	
        }
        
        
      });
      
      google.maps.event.addListener(map, 'idle', function() {
    	  if(sentMinZoomMessage == true)
      	    {
    		  sentMinZoomMessage= false;
    		}
    	  
    	   if (sentMaxZoomMessage == true)
    		  {
    		   sentMaxZoomMessage= false;
    		  }
      });
    		
     
  //Fix the scrollbar issue 
  google.maps.event.addListener(infowindow, 'domready', function() {
		document.getElementById('xxxx').parentNode.style.overflow-y='visible';
		document.getElementById('xxxx').parentNode.parentNode.style.overflow-y='visible';
 });
  
    		
   
    
   

   
  </script>
  

  
   
</html>





